*{
	padding: 0;
	margin: 0;
}
.tade{
	width: 1200px;
	margin: auto;
	clear: both;
}
.tad{
	text-align: center;
	width: 33%;
	float: left;
	line-height: 200px;
	background-color: chartreuse;
	border: 1px solid #000000;
	transition: all 1s;
	animation: run 1s initial;
}
.tad:hover{
	background-color: aqua;
	border: 1px solid #7FFF00;
	font-size: 30px;
	line-height: 200px;
	text-align: center;
	color: brown;
	box-shadow: 1px 1px 10px #A52A2A;
}
@media(max-width:600px) {
	.tade{
		width: 100%;
	}
	.tad{
		width: 99%;
	}
}
@keyframes run{
	from{
		transform: rotateX(0);
	}
	to{
		transform: rotateX(360);
	}
}